<template>
  <div class="a">
    <van-nav-bar
      title="预约洗衣"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="main">
      <div class="left">
        <MenuLeft ref="menuLeft" @fclick="changePro"></MenuLeft>
      </div>
      <div class="right">
        <ListR :prolist="prolist"></ListR>
      </div>
    </div>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="go()" />
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-button
        style="background-color: rgb(63, 161, 157); color: #ffff"
        text="立即购买"
      />
    </van-goods-action>
  </div>
</template>
<script>
import { Toast } from "vant";
import { fapi } from "@/assets/js/farmapi.js";
import MenuLeft from "./TypeLeft.vue";
import ListR from "./TypeRight.vue";
export default {
  components: {
    MenuLeft,
    ListR,
  },
  name: "type",
  data() {
    return {
      prolist: [],
    };
  },
  mounted() {
    this.getData();
    this.getData2(this.$route.query.i);
  },
  methods: {
    changePro(c) {
      this.getData2(c);
    },
    getData() {
      fapi("api/type").then((res) => {
        this.$refs.menuLeft.typelist = res.data.data;
      });
    },
    getData2(num) {
      fapi("api/product", { type: num }).then((r) => {
        this.prolist = r.data.data;
      });
    },
    onClickLeft() {
      this.$router.push("/");
    },
    go() {
      this.$router.push("/car");
    },
  },
};
</script>
<style lang="less" scoped>
img {
  width: 200px;
  margin-left: 30px;
  margin-top: 20px;
}
.main {
  display: flex;
}
.right {
  margin-left: 20px;
}
.m {
  display: flex;
}
.r {
  margin-left: 20px;
  p {
    margin-top: 20px;
  }
}
.left {
  .active {
    color: #03a19c;
    border-left: 4px solid #03a19c;
    padding-left: 20px;
  }
}
</style>